<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>

<head>
    <base href="<%=basePath%>"/>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="view/bootstrapvalidator/css/bootstrapValidator.css" />
    <script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="utf-8" src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<!-- 搜索 -->
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">我的名片</h4>
    </div>
    <div class="panel-body">
        <form action="mingpian/selectpl" id="seachform" method="post"
              class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-5">
                    <label for="name" class="col-md-4 control-label">姓名</label>
                    <div class="col-md-8">
                        <input type="text" id="name" name="name" class="form-control"
                               placeholder="请输入姓名" value=""> <input
                            type="hidden" name="page" id="page" value="1">
                        <input type="hidden" name="pageSize" id="pageSize"
                               value="6">
                    </div>
                </div>
                <div class="col-md-5">
                    <label  class="col-md-4 control-label">性别</label>
                    <div class="col-md-8">
                        <select name="sex" class="form-control">
                            <option value="">--请选择--</option>
                            <option value="M" >男</option>
                            <option value="F" >女</option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-5">
                    <label for="company" class="col-md-4 control-label">公司</label>
                    <div class="col-md-8">
                        <input type="text" id="company" name="company"
                               placeholder="请输入公司名" class="form-control"
                               value="">
                    </div>
                </div>

                <div class="col-md-5">
                    <label for="typeid" class="col-md-4 control-label">名片类型</label>
                    <div class="col-md-8">
                        <select name="typeid" class="form-control">
                            <option value="">--请选择--</option>
                            <c:forEach items="${type}" var="t">
                            <option value="${t.oid}"
                            >${t.type}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-5">
                    <label for="mobile" class="col-md-4 control-label">电话</label>
                    <div class="col-md-8">
                        <input type="text" id="mobile" name="mobile" placeholder="请输入电话"
                               class="form-control" value="">
                    </div>
                </div>

                <div class="col-md-5">
                    <label class="col-md-4 control-label"></label>
                    <div class="col-md-8">
                        <button type="button" onclick="searchBtn()"
                                class="btn btn-success">搜索名片</button>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>

<!-- 列表 -->
<div class="panel panel-primary">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="thead-blue" align="center">
            <td>选择</td>
            <td>姓名</td>
            <td>名片类型</td>
            <td>性别</td>
            <td>公司</td>
            <td>电话</td>
            <td>详情</td>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${list.data}" var="mp">
        <tr align="center">
            <td><input type="checkbox" name="oids" value="${mp.oid}"></td>
            <td>${mp.name}</td>
            <td>${mp.type.type}</td>
            <td>${mp.sex}</td>
            <td>${mp.company}</td>
            <td>${mp.mobile}</td>
            <td><a type="button" href="mingpian/xiangqing?oid=${mp.oid}"
                   class="btn btn-info btn-xs">详情</a></td>
        </tr>
        </c:forEach>
        <tr>
            <td align="center"><input type="checkbox" id="checkAll" onclick="checkAll(this)">全选
            </td>
            <td colspan="3">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="typeid" for="name">移动到:</label>
                        <select name="typeid" id="typeid" class="form-control" >
                            <option value="">----请选择----</option>
                            <c:forEach items="${type}" var="t">
                            <option value="${t.oid}" >${t.type}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="button" onclick="moveContact()" class="btn btn-success">移动</button>
                    </div>
                </form>
            </td>
            <td colspan="3">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="typeid" for="name">发送给:</label>
                        <input type="hidden" id="empid" name="empid">
                        <div class="input-group">
                            <input type="text" id="empName" name="empName"
                                   readonly="readonly" class="form-control" placeholder="请选择接收的员工">
                            <span class="input-group-btn">
											<button class="btn btn-info" type="button" data-toggle="modal" data-target="#selectempModal">请选择</button>
										</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" onclick="sendContact()"
                                class="btn btn-success">发送</button>
                    </div>
                </form>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 分页 -->
<div class="input-group col-md-6 col-md-offset-3">
    <div class="row">
        <div class="btn-group">
            <button onclick="gotoPage(1,${list.pageSize})" class="btn btn-primary" type="button">首页</button>
            <c:if test="${list.page==1 }">
                <button class="btn btn-primary disabled" type="button">上一页</button>
            </c:if>
            <c:if test="${list.page>1 }">
                <button onclick="gotoPage(${list.page-1},${list.pageSize})" class="btn btn-primary" type="button">上一页</button>
            </c:if>

            <button class="btn btn-primary disabled" type="button">当前第${list.page}/${list.pageCount}页</button>

            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    每页显示${list.pageSize}条 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href=" ">每页显示5条</a></li>
                    <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
                    <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
                    <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
                </ul>
            </div>

            <button class="btn btn-primary disabled" type="button">共${list.rowCount}条记录</button>

            <c:if test="${list.page==list.pageCount }">
                <button class="btn btn-primary disabled" type="button">下一页</button>
            </c:if>
            <c:if test="${list.page<list.pageCount }">
                <button onclick="gotoPage(${list.page+1},${list.pageSize})"  class="btn btn-primary" type="button">下一页</button>
            </c:if>
            <button onclick="gotoPage(${list.pageCount },${list.pageSize})" class="btn btn-primary" type="button">尾页</button>
        </div>
    </div>
</div>
<br>
<br>
<br>







<script type="text/javascript">
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){//没有权限
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>

<!-- 模态框（Modal） -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="alertMsgModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body" id="alertmsg">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="selectempModal" tabindex="-1" role="dialog" aria-labelledby="selectempModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="selectempModalLabel">选择员工</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="dept" class="col-md-4 control-label">所属部门</label>
                        <div class="col-md-5">
                            <select name="dept" class="form-control" id="dept">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="job" class="col-md-4 control-label">所属职位</label>
                        <div class="col-md-5">
                            <select name="job" class="form-control" id="job">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="emp" class="col-md-4 control-label">员工信息</label>
                        <div class="col-md-5">
                            <select name="emp" class="form-control" id="emp" size="10">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="sub" class="btn btn-primary">确认选择</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function setempvalue(eid, empName) {
        $("#proposer").val(eid);
        $("#empName").val(empName);
    }
</script>

<script type="text/javascript">
    function setempvalue(eid, empName) {
        $("#empid").val(eid);
        $("#empName").val(empName);
    }
</script>
</body>
<script type="text/javascript">
    function gotoPage(page,pageSize){
        $("#page").val(page);
        $("#pageSize").val(pageSize);
        $("#seachform").submit();
    }
    function searchBtn(){
        $("#page").val(1);
        $("#seachform").submit();
    }
    function checkAll(o){
        $("input[name='oids']").prop("checked",$(o).prop("checked"));
    }
    function moveContact(){
        var oids = $("input[name='oids']:checked");
        var typeid= $("#typeid").val();
        if(oids.length==0){
            $("#alertmsg").text("请选择要移动的名片!");
            $('#alertMsgModal').modal('show');
            return;
        }
        if(typeid==""){
            $("#alertmsg").text("请选择移动至的名片夹!");
            $('#alertMsgModal').modal('show');
            return;
        }
        var mids="";
        for(var i=0;i<oids.length;i++){
            mids=mids+oids[i].value+",";
        }
        mids=mids.slice(0,-1);
        document.location.href="mingpian/yidong?typeid="+typeid+"&mids="+mids;
    }
    function sendContact(){
        var oids = $("input[name='oids']:checked");
        var empid= $("#empid").val();
        if(oids.length==0){
            $("#alertmsg").text("请要发送的名片!");
            $('#alertMsgModal').modal('show');
            return;
        }
        if(empid==""){
            $("#alertmsg").text("请选择要发送给的员工!");
            $('#alertMsgModal').modal('show');
            return;
        }
        var mids="";
        for(var i=0;i<oids.length;i++){
            mids=mids+oids[i].value+",";
        }
        mids=mids.slice(0,-1);
        document.location.href="mp/sendContact?empid="+empid+"&mids="+mids;
    }
</script>
</html>